<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车位图</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <style>
        .parkPlace {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="layui-input-inline">
    <input type="text" name="text" placeholder="请输入车牌号" autocomplete="off"
           class="layui-input carNum">
</div>
<button class="layui-btn layui-btn-danger myCar">查看</button>
<button class="layui-btn layui-btn-danger reload">重置</button>
<div class="layui-row layui-col-space8" id="parkPlace">

</div>
<!--<div id="map" style="width:600px; height:400px">-->
<!--</div>-->
</body>
</html>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/lib/ckplayer/ckplayer.js"></script>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript" src="/static/assets/convertor.js"></script>
<script type="text/javascript">
    layui.use(['jquery'], function () {
        var $ = layui.$
        var vUrl = $('#video').data('url'),
            videoObject = {
                container: '#video',
                loop: true,
                autoplay: true,
                video: [
                    ['http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 'video/mp4']
                ],
                variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
                flashplayer: false,//如果强制使用flashplayer则设置成true
            };
        var player = new ckplayer(videoObject);


        function handleError() {

        }

        // if (window.navigator.geolocation) {
        //     alert(111)
        //     var options = {
        //         enableHighAccuracy: true,
        //     };
        //     window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
        // } else {
        //     alert("浏览器不支持html5来获取地理位置信息");
        // }

        function handleSuccess(position) {
            alert(111)
            // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度
            var lng = position.coords.longitude;
            var lat = position.coords.latitude;
            // 调用百度地图api显示
            var map = new BMap.Map("map");
            var ggPoint = new BMap.Point(lng, lat);
            // 将google地图中的经纬度转化为百度地图的经纬度
            BMap.Convertor.translate(ggPoint, 2, function (point) {
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                map.centerAndZoom(point, 15);
            });
        }
    });
</script>
<script>
    $(function () {

        function getContent(color, parkPlaces, i) {
            var content = '<div class="parkPlace layui-col-md1 layui-col-md-offset1 ' + color + '">'
                + '<div>类型：' + parkPlaces[i].desc + '</div>'
                + '<div>车位号：' + parkPlaces[i].parkPlaceNum + '</div>'
                + '<div>车牌号：' + parkPlaces[i].carNum + '</div>'
            '</div>'
            return content
        }

        $(".myCar").on('click', function () {
            var carNum = $('.carNum').val()
            getMyCar(carNum)
        })

        $(".reload").on('click', function () {
            window.location.reload();
        })

        function getMyCar(carNum) {
            $(".parkPlace div:contains(车牌号)").css("background-color", '')
            $(".parkPlace div:contains(" + carNum + ")").css("background-color", 'red')
        }

        var getParkPlace = function () {
            $.ajax({
                url: '/parkPlace/selectAllParkPlace',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    var parkPlaces = res.data.parkPlaces
                    $("#parkPlace").empty()
                    for (var i = 0; i < parkPlaces.length; i++) {
                        var content = getContent('layui-bg-blue', parkPlaces, i)
                        $("#parkPlace").append(content)
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }
        getParkPlace()
    })
</script>